<template>
  <div class="lang_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('Lang.switch language')" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
    <v-nav :title="$t('Lang.switch language')" v-if="isDayTime === true"></v-nav>
    <div class="lang_mod_box">
      <van-cell v-for="(item, index) in langList" :key="index" :class="{ active: $i18n.locale === item.lang, active1: $i18n.locale != item.lang }" :title="item.title" @click="switchLang(item.lang)" v-if="isDayTime === false" />
      <van-cell v-for="(item, index) in langList" :key="index" :class="{ active: $i18n.locale === item.lang }" :title="item.title" @click="switchLang(item.lang)" v-if="isDayTime === true" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'lang',
  data() {
    return {
      loading: false,
      isDayTime: false,
      langList: [
        {
          title: '简体中文',
          lang: 'cn'
        },
        {
          title: '繁體中文',
          lang: 'tw'
        },
        {
          title: '日本',
          lang: 'ja'
        },
        {
          title: 'English',
          lang: 'en'
        },
        {
          title: 'عربي',
          lang: 'ar'
        },
        {
          title: 'Русский',
          lang: 'ru'
        },
        {
          title: 'Português',
          lang: 'pt'
        },
        {
          title: 'español',
          lang: 'es'
        },
        {
          title: '한국인',
          lang: 'ko'
        },
        {
          title: 'Tiếng Việt',
          lang: 'vi'
        },
        {
          title: 'แบบไทย',
          lang: 'th'
        },
        {
          title: 'bahasa Indonesia',
          lang: 'id'
        }
      ]
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    switchLang(type) {
      if (this.$i18n.locale === type) {
        return
      } else {
        this.loading = true
        this.$i18n.locale = type
        localStorage.setItem('lang', this.$i18n.locale)
        setTimeout(() => {
          this.loading = false
          this.$router.push('home')
        }, 500)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.lang_mod {
  min-height: 100vh;
  background-color: #f3f3f3;

  &_box {
    padding: 12px;

    .active {
      background-color: #daab51;
      color: white;
    }

    .van-cell {
      width: 100%;
      height: 32px;
      padding: 8px 12px;
      align-items: center;
      border-radius: 4px;
      margin-bottom: 10px;

      .van-cell__title {
        text-align: center;
      }
    }
  }
}

.daytime {
  background: #fff;
  color: black;
}

.active1 {
  background: #121212;
  color: #fff;
}

.darknight {
  background: #191b27 !important;
  color: #fff;
}

.dark_li_color {
  background: #121212;
  color: #fff;
}

.white {
  color: #fff;
}

.van-cell::after {
  border-bottom: none;
}
</style>
